<!-- 角色列表 -->
<template>
  <div class="content">
    <!-- 筛选栏 -->
    <search-form ref="searchForm" :dataFilterShow="false">
      <div>
        <el-form-item label="角色名称:" prop="roleName">
          <el-input
            v-model="filterData.roleName"
            clearable
            placeholder="角色名称"
          ></el-input>
        </el-form-item>
      </div>
      <div slot="tool">
        <el-button type="primary" @click="upDateRole(1, {})">新增</el-button>
        <el-button @click="getDataList">查询</el-button>
      </div>
    </search-form>

    <!-- 列表栏 -->
    <filter-table
      :tableData="dataList.records"
      :pageData="dataList"
      @pageChange="pageChange"
      :loading="loading"
      ref="refFilterTable"
    >
      <template slot="table">
        <el-table-column prop="roleName" label="角色名称"></el-table-column>
        <el-table-column prop="roleCode" label="角色编码"></el-table-column>
        <el-table-column
          prop="createTime"
          label="创建时间"
          width="165"
        ></el-table-column>
        <el-table-column prop="updateTime" label="更新时间"></el-table-column>
        <el-table-column fixed="right" label="操作" width="180">
          <template slot-scope="{ row }">
            <el-button type="text" @click="upDateRole(2, row)">修改</el-button>
            <el-button type="text" @click="delRole(row.roleId)">删除</el-button>
          </template>
        </el-table-column>
      </template>
    </filter-table>
    <!-- 新增编辑角色 -->
    <update-role
      ref="updateDeptDialog"
      :isAdd="isAdd"
      :detailData="roleData"
      :addEditVisible="addEditVisible"
    ></update-role>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { parseTime, formatTime } from '@/utils'
import SearchForm from '@/components/searchForm/searchTable'
import FilterTable from '@/components/filterTable/index'
import { getRoleList } from '@/api/rightsManage'
import UpdateRole from './components/updateRole'
import { removeRole } from '@/api/rightsManage'
export default {
  name: 'roleList',
  components: { SearchForm, FilterTable, UpdateRole },
  computed: {
    ...mapGetters(['name', 'userInfo'])
  },
  data() {
    return {
      loading: false,
      exportButtomLoading: false,
      addEditVisible: false,
      filterData: {
        roleName: ''
      },
      isAdd: 1,
      roleData: {},
      dataList: [],
      pagination: {
        page: 1,
        total: null,
        limit: 20
      }
    }
  },
  created() {},
  mounted() {
    this.getDataList()
  },
  methods: {
    // 获取列表数据
    getDataList() {
      this.loading = true
      getRoleList(Object.assign({}, this.filterData, this.pagination)).then(
        res => {
          this.loading = false
          this.dataList = res.data
        }
      )
    },
    // 新增编辑角色
    upDateRole(type, item) {
      this.isAdd = type
      this.roleData = Object.assign({}, item)
      this.$refs.updateDeptDialog.addEditVisible = true
    },
    // 删除角色
    delRole(roleId) {
      this.$confirm('确认删除角色?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          removeRole({ roleId: roleId }).then(res => {
            this.$message({
              message: '删除成功',
              type: 'success'
            })
            this.getDataList()
          })
        })
        .catch(() => {})
    },
    // 分页联动
    pageChange(pagedata) {
      setTimeout(() => {
        this.pagination = pagedata
      }, 1)
    }
  },
  watch: {
    filterData: {
      deep: true,
      handler(now, old) {
        this.pagination.page === 1
          ? this.getDataList()
          : (this.pagination.page = 1)
      }
    },
    pagination: {
      deep: true,
      handler(now, old) {
        this.getDataList()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.filterForm {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.el-form-item {
  margin-bottom: 0 !important;
}
</style>
